<template>
  <div>
    <pre>
      <code class="language-javascript">{{ formattedString }}</code>
    </pre>
  </div>
</template>

<!--<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import 'prismjs';
import 'prismjs/themes/prism.css'; // 选择您喜欢的主题
import { exampleFunction } from '@/utils/example'
import * as Babel from '@babel/standalone';

export default defineComponent({
  setup() {

    const formattedString = ref('');

    const getFormattedFunctionString = () => {
      // 将函数转换为字符串
      const functionString = exampleFunction.toString();

      // 使用 Babel 进行转换
      const result = Babel.transform(functionString, {
        presets: ['typescript'],
      });
      debugger;

      // 添加注释（简单示例）
      const formattedCode = `/**
 * Example Function
 */
${result.code}`;

      formattedString.value = formattedCode;
    };

    onMounted(() => {
      getFormattedFunctionString();
      // 触发 Prism.js 高亮
      (window as any).Prism.highlightAll();
    });
    return {
      code: `function isIE () {
            const bw = window.navigator.userAgent;
            const compare = (s) => bw.indexOf(s) >= 0;
            const ie11 = (() => 'ActiveXObject' in window)();
            return compare('MSIE') || ie11;
        }`
    };
  },
});
</script>-->

<style scoped>
/* 可以添加自定义样式 */
</style>
